<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>市场地图</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<!-- App favicon -->
	<link rel="shortcut icon" href="assets/images/favicon.ico">

	<!-- App css -->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
	<link href="assets/css/metismenu.min.css" rel="stylesheet" type="text/css" />
	<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="assets/css/custom.css" />
	<!-- layer插件 -->
	<link rel="stylesheet" type="text/css" href="plugins/layer2.4/skin/layer.css" />

	<!-- datatables插件 -->
	<!-- <link href="plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
	<link href="plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
	<link href="plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" /> -->
	</script>

	<script src="assets/js/modernizr.min.js"></script>


	<style type="text/css">
		body,
		html {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
		}

		#allmap {
			float: right;
			margin-right: 240px;
			width: 65%;
			height: 1000px;
			margin: 0;
			font-family: "微软雅黑";
		}

		@media (max-width:1280px) {
			#allmap {
				float: right;
				margin-right: 0;
				width: 50%;
				height: 1000px;
				margin: 0;
				/* overflow: hidden; */
				font-family: "微软雅黑";
			}

			@media (max-width:1160px) {
				#allmap {
					float: right;
					margin-right: 0;
					width: 60%;
					height: 1000px;
					margin: 0;
					/* overflow: hidden; */
					font-family: "微软雅黑";
				}
			}

			@media (max-width:1070px) {
				#allmap {
					float: right;
					margin-right: 0;
					width: 50%;
					height: 1000px;
					margin: 0;
					/* overflow: hidden; */
					font-family: "微软雅黑";
				}
			}
		}
	</style>

</head>

<body>
	<div id="wrapper">
		<div class="left side-menu">

			<div class="slimscroll-menu" id="remove-scroll">

				<!-- LOGO -->
				<div class="topbar-left">
					<a href="index.html" class="logo">
						<span>
							<img src="assets/images/logo.png" alt="" height="22">
						</span>
						<i>
							<img src="assets/images/logo_sm.png" alt="" height="28">
						</i>
					</a>
				</div>

				<!-- 用户区域 -->
				<div class="user-box">
					<!-- <div class="user-img">
							<img src="assets/images/users/avatar-1.jpg" alt="user-img" title="Mat Helme" class="rounded-circle img-fluid">
						</div>
						<h5><a href="#">超级管理员</a> </h5>
						<p class="text-muted">超管</p> -->
				</div>

				<!--- 侧边菜单 -->
				<div id="sidebar-menu">

					<ul class="metismenu" id="side-menu">
						<!-- 主页 -->
						<li>
							<a href="index.html">
								<i class="fi-air-play"></i>
								<!--<span class="badge badge-danger badge-pill float-right">7</span> -->
								<span> 主页 | 控制台 </span>
							</a>
						</li>
						<!-- 地图 -->
						<li>
							<a href="javascript: void(0);"><i class="fi-location-2"></i> <span> 地图展示 </span> <span
									class="menu-arrow"></span></a>
							<ul class="nav-second-level" aria-expanded="false">
								<li><a href="MapBarcodeMachine.html">脚标机地图</a></li>
								<li><a href="MapSalesTerminal.html">销售终端地图</a></li>
							</ul>
						</li>
						<!--脚标机监控-->
						<li>
							<a href="javascript: void(0);"><i class="fa fa-desktop"></i> <span> 脚标机监控 </span> <span
									class="menu-arrow"></span></a>
							<ul class="nav-second-level" aria-expanded="false">
								<li><a href="BarcodeMachineStatusList.html">脚标机监控</a></li>
								<li><a href="BarcodeMachineAlertList.html">报警信息记录</a></li>
							</ul>
						</li>
						<!-- 基础数据管理 -->
						<li>
							<a href="javascript: void(0);"><i class="fa fa-wpforms"></i> <span> 基础数据管理 </span> <span
									class="menu-arrow"></span></a>
							<ul class="nav-second-level" aria-expanded="false">
								<li><a href="SlaughterHouseList.html">屠宰场管理</a></li>
								<li><a href="StallsList.html">档口管理</a></li>
								<li><a href="BarcodeMachineList.html">脚标机管理</a></li>
								<li><a href="IdCardList.html">ID卡数据管理</a></li>
								<li><a href="SalesTerminalList.html">销售终端管理</a></li>
								<li><a href="PoultryCategoryList.html">禽类信息管理</a></li>
							</ul>
						</li>
						<!--条形码发放回收记录-->
						<li>
							<a href="javascript: void(0);"><i class="fa fa-barcode"></i> <span> 条形码发放回收管理 </span> <span
									class="menu-arrow"></span></a>
							<ul class="nav-second-level" aria-expanded="false">
								<li><a href="BarcodeGrantList.html">条形码发放记录管理</a></li>
								<li><a href="BarcodeRecoveryList.html">条形码回收记录管理</a></li>
							</ul>
						</li>
						<!--脚标机发放回收-->
						<li>
							<a href="javascript: void(0);"><i class="fa fa-print"></i> <span> 脚标机发放回收管理 </span> <span
									class="menu-arrow"></span></a>
							<ul class="nav-second-level" aria-expanded="false">
								<li><a href="BarcodeMachineGrantList.html">脚标机发放管理</a></li>
								<li><a href="BarcodeMachineRecoveryList.html">脚标机回收管理</a></li>
								<li><a href="BarcodeMachineUserList.html">脚标机用户更新信息</a></li>
							</ul>
						</li>
						<!--脚标机报废记录-->
						<li>
							<a href="javascript: void(0);"><i class="fa fa-wrench"></i> <span> 脚标机报废维修管理 </span> <span
									class="menu-arrow"></span></a>
							<ul class="nav-second-level" aria-expanded="false">
								<li><a href="BarcodeMachineRepairList.html">脚标机报修记录管理</a></li>
								<li><a href="BarcodeMachineScrapList.html">脚标机报废记录管理</a></li>
							</ul>
						</li>
						<!--ID卡发放管理-->
						<li>
							<a href="javascript: void(0);"><i class="fa fa-id-card"></i> <span> ID卡发放回收管理 </span> <span
									class="menu-arrow"></span></a>
							<ul class="nav-second-level" aria-expanded="false">
								<li><a href="IdCardGrantList.html">ID卡发放记录管理</a></li>
								<li><a href="IdCardRecoveryList.html">ID卡回收记录管理</a></li>
							</ul>
						</li>
						<!--贴码管理-->
						<li>
							<a href="LabelingRecordList.html"><i class="fa fa-qrcode"></i> <span>贴标信息管理 </span></a>
						</li>
						<!--用户管理-->
						<li>
							<a href="javascript: void(0);"><i class="fa fa-user"></i> <span> 用户管理 </span> <span
									class="menu-arrow"></span></a>
							<ul class="nav-second-level" aria-expanded="false">
								<li><a href="SysUserList.html">用户信息管理</a></li>
								<li><a href="SysUserRoleList.html">用户角色管理</a></li>
							</ul>
						</li>
						<!--角色管理-->
						<li>
							<a href="javascript: void(0);"><i class="fa fa-users"></i> <span> 角色管理 </span> <span
									class="menu-arrow"></span></a>
							<ul class="nav-second-level" aria-expanded="false">
								<li><a href="SysRoleList.html">角色管理</a></li>
								<li><a href="SysRoleMenuList.html">角色权限管理</a></li>
							</ul>
						</li>
						<!--日志管理-->
						<li>
							<a href="LogRecordList.html"><i class="fa fa-qrcode"></i> <span>日志信息管理 </span></a>
						</li>
					</ul>
					</li>
					</ul>

				</div>
				<!-- Sidebar -->

				<div class="clearfix"></div>

			</div>
			<!-- Sidebar -left -->
		</div>

		<!-- zheng -->
		<div>
			<div class="" style="margin-left: 320px;margin-top: 50px;float:left;width: 10%;">
				<div class="card-box" style="width:100%;height:1000px;">
					<div class="select-market-container">

					</div>
					<div>
						<div class="accordion" id="accordionExample" style="overflow-y:auto;width:100%; height:700px;">
							<div class="card">
								<div class="card-header" id="headingOne">
									<h2 class="mb-0">
										<button class="btn btn-link btn-block text-left" type="button"
											data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
											aria-controls="collapseOne">
											卡纸设备
											<span class="badge badge-primary badge-pill spanCollapseOne">0</span>
										</button>
									</h2>
								</div>
								<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
									data-parent="#accordionExample">
									<div class="card-body">
										请先选择市场
									</div>
								</div>
							</div>
							<div class="card">
								<div class="card-header" id="headingTwo">
									<h2 class="mb-0">
										<button class="btn btn-link btn-block text-left collapsed" type="button"
											data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"
											aria-controls="collapseTwo">
											缺纸设备
											<span class="badge badge-primary badge-pill spanCollapseTwo">0</span>
										</button>
									</h2>
								</div>
								<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
									data-parent="#accordionExample">
									<div class="card-body">
										请先选择市场
									</div>
								</div>
							</div>
							<div class="card">
								<div class="card-header" id="headingThree">
									<h2 class="mb-0">
										<button class="btn btn-link btn-block text-left collapsed" type="button"
											data-toggle="collapse" data-target="#collapseThree" aria-expanded="false"
											aria-controls="collapseThree">
											正常设备
											<span class="badge badge-primary badge-pill spanCollapseThree">0</span>
										</button>
									</h2>
								</div>
								<div id="collapseThree" class="collapse" aria-labelledby="headingThree"
									data-parent="#accordionExample">
									<div class="card-body">
										请先选择市场
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="allmap" style="margin-top: 50px; float:left"></div>
		</div>
		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/bootstrap.bundle.min.js"></script>
		<script src="assets/js/metisMenu.min.js"></script>
		<script src="assets/js/jquery.slimscroll.js"></script>
		<script src="assets/js/jquery.core.js"></script>
		<script src="assets/js/jquery.app.js"></script>
		<script type="text/javascript"
			src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=3WO11jODE5DEq1yM0EGkQe6hWWVoxRZK"></script>

		<script type="text/javascript">
			let URL = "http://39.108.147.139:9091/"
			let map = new BMapGL.Map("allmap"); // 创建Map实例
			map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 19); // 初始化地图,设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
			map.setHeading(64.5);
			map.setTilt(73);
			let marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915)); // 创建点
			function add_overlay() {
				map.addOverlay(marker); //增加点
			}
			add_overlay()
			$(document).ready(function () {
				//请求全部市场
				getMarket()

			})

			// 请求全部市场
			function getMarket() {
				$.ajax({
					type: 'get',
					url: URL + 'slaughterHouse',
					dataType: 'json',
					success: (data) => {
						let items = ''
						data = data.object
						let marketId = data[0].id //初始化
						data.forEach(e => {
							items += `<option value="${e.id}">${e.name}</option>`
						})
						let str =
							`<select class="form-control select-market" style="width: 100%;margin-bottom: 50px;">
								${items}
							</select>`
						$('.select-market-container').append(str)
						//取得市场的值交给后台
						sendSelectMarketFun(marketId)
						$(".select-market").change(() => {
							marketId = $(".select-market").val()
							sendSelectMarketFun(marketId)
						})
					},
					error: () => {
						alert('请求市场失败')
					}
				})
			}

			function sendSelectMarketFun(marketId) {
				console.log(marketId)
				$.ajax({
					type: 'GET',
					url: `${URL}MachineChart/find/by/houseId?id=${marketId}`,
					dataType: "json",
					async: false,
					success: (data) => {
						makEquipmentList(data)
					},
					error: () => {
						alert('请求脚标机失败')
					}
				})

			}

			function makEquipmentList(data) {
				// 卡纸，缺纸，正常
				data = data.object
				console.log(data)
				// data = [data[1], data[2], data[0]]
				// 处理接下来的数据
				if (data.length > 3) {
					for (let j = 3; j < data.length; j++) {
						data.push(data[j])
					}
				}
				let collapseOneItems = data[1].list.map((e) => {
					let item =
						`<a href="#" class="list-group-item list-group-item-action">脚标机编号：${e.barcodeMachineId}</a>`
					item.allValue = e
					return item
				})
				collapseOneItems = collapseOneItems.join("")
				let collapseTwoItems = data[2].list.map((e) => {
					let item =
						`<a href="#" class="list-group-item list-group-item-action">脚标机编号：${e.barcodeMachineId}</a>`
					return item
				})
				collapseTwoItems = collapseTwoItems.join("")
				let collapseThreeItems = data[0].list.map((e) => {
					let item =
						`<a href="#" class="list-group-item list-group-item-action">脚标机编号：${e.barcodeMachineId}</a>`
					return item
				})
				collapseThreeItems = collapseThreeItems.join("")
				let collapseOneBody = $('#collapseOne .card-body')
				let collapseTwoBody = $('#collapseTwo .card-body')
				let collapseThreeBody = $('#collapseThree .card-body')
				let items = ''
				let collapseOne = `<div class="list-group">
					${collapseOneItems}
				</div>`
				let collapseTwo = `<div class="list-group">
					${collapseTwoItems}
				</div>`
				let collapseThree = `<div class="list-group">
					${collapseThreeItems}
				</div>`
				collapseOneBody.empty()
				collapseTwoBody.empty()
				collapseThreeBody.empty()
				collapseOneBody.append(collapseOne)
				collapseTwoBody.append(collapseTwo)
				collapseThreeBody.append(collapseThree)
				// 修改条数
				$('.spanCollapseOne').html(data[1].size)
				$('.spanCollapseTwo').html(data[2].size)
				$('.spanCollapseThree').html(data[0].size)

				$(".list-group-item").click(function (e) {
					$(".list-group-item").siblings("a").removeClass("active");
					$(this).addClass("active");
					// 出现地图定位脚标机
					console.log(this)
					console.log(e)
				});
			}

			function listClickFun(e) {
				console.log(e)
				// 点击出现详细内容？
				// 出现小红点
			}
		</script>
</body>

</html>